import React, { Component, Suspense } from "react";
import { connect } from "dva";
import GridContent from "@/components/PageHeaderWrapper/GridContent";
import { FormattedMessage } from "umi-plugin-react/locale";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import PageLoading from "@/components/PageLoading";
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row, Tag, Select } from "antd";
import styles from "../SlotCheck/index.less";
import { knowledgeDialogNodeInfo, knowledgeDialogInquire, knowledgeDialogAllDict } from '@/services/dialog';
import UserSession from "@/UserSession";

const RuleItem = React.lazy(() => import("./ruleItem"));
const { Option } = Select;

const formItemLayout = {
	labelCol: { span: 1 },
	wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
	collectSlot,
	loading: loading.effects["collectSlot/fetchSlot"],
}))
class SlotRules extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dialogSlots: [],
			slotLoading: true, // 词槽加载loading
			nodeId: props.nodeId,
			stage: props.stage,
			dialogId: props.dialogId, // 多轮对话id
			slot: [],
			inquires: [],
			dicts: [],
		};
	}

	componentDidMount() {
		this.fetchSlot();
		this.getDialogInquire();
		this.getAllDict();
	}

	fetchSlot = async () => {
		const { dispatch } = this.props;
		const { dialogId, nodeId, stage } = this.state;
		let { slot, dialogSlots } = this.state;
		if (UserSession.isSystemKnowledge()) {
			let res = await knowledgeDialogNodeInfo({
				dialogId,
				nodeId,
				nodeType: stage,
				field: "slot",
			});
			if (res.code === 0 && res.code != undefined) {
				return false;
			}
			slot = res.dialogStage.slot;
			dialogSlots = res.dialogSlots;
			if (!slot) {
				slot = [];
			}
			if (!dialogSlots) {
				dialogSlots = [];
			}
			this.setState({
				dialogSlots: res.dialogSlots,
				slot,
			});
		} else {
			dispatch({
				type: "collectSlot/fetchSlot",
				payload: {
					dialogId,
					nodeId,
					stage,
					field: "slot",
					urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
				},
				callback: (res) => {
					if (res.code === 0 && res.code != undefined) {
						return false;
					}
					slot = res.dialogStage.slot;
					dialogSlots = res.dialogSlots;
					if (!slot) {
						slot = [];
					}
					if (!dialogSlots) {
						dialogSlots = [];
					}
					this.setState({
						dialogSlots: res.dialogSlots,
						slot,
					});
				},
			});
		}

	};

	getDialogInquire = async () => {
		const { dispatch } = this.props;
		const { dialogId, nodeId } = this.state;
		const { slot, dialogSlots } = this.state;
		if (UserSession.isSystemKnowledge()) {
			let res = await knowledgeDialogInquire({ dialogId });
			if (res.code === 0 && res.code != undefined) {
				return false;
			};
			this.setState({ inquires: res });
		} else {
			dispatch({
				type: "collectSlot/getInquire",
				payload: {
					dialogStageId: `${dialogId}-${nodeId}`,
					urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
				},
				callback: (res) => {
					if (res.code === 0 && res.code != undefined) {
						return false;
					};
					this.setState({ inquires: res });
				},
			});
		}
	};

	getAllDict = async () => {
		const { dispatch } = this.props;
		const { dialogId, nodeId } = this.state;
		const { slot, dialogSlots } = this.state;
		if (UserSession.isSystemKnowledge()) {
			let res = await knowledgeDialogAllDict({ dialogId });
			this.setState({
				dicts: res,
			});
		} else {
			dispatch({
				type: "collectSlot/getAllDict",
				payload: {
					dialogId,
					urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
				},
				callback: (res) => {
					// if(res.code === 0 && res.code != undefined){
					//     return false;
					// }
					this.setState({
						dicts: res,
					});
				},
			});
		}
	};

	fixCaseArr = (arr) => {
		let { slot } = this.state;
		slot = arr;
		this.setState({
			slot,
		});
	};

	saveSlotCheck = () => {
		const { dispatch, closeDrawer } = this.props;
		const { dialogId, nodeId, slot, stage } = this.state;
		dispatch({
			type: "collectSlot/saveSlot",
			payload: {
				field: "slot",
				id: `${dialogId}-${nodeId}`,
				slot,
				stage,
			},
			callback: (res) => {
				if (res.code && res.code !== undefined) {
					return false;
				}
				message.info("保存成功");
				closeDrawer();
			},
		});
	};

	render() {
		const { dialogSlots, slot, inquires, dicts } = this.state;
		return (
			<GridContent>
				<Suspense fallback={<PageLoading />}>
					<Col>
						<RuleItem
							data={inquires}
							caseArr={slot}
							selected={dicts}
							dialogSlots={dialogSlots}
							upDateCase={(val) => this.fixCaseArr(val)}
							upNewData={(val) => this.fixCaseArr(val)}
						/>
						<Button
							type='primary'
							htmlType='button'
							onClick={() => this.saveSlotCheck()}
							style={{ marginTop: 20 }}
							disabled={UserSession.isSystemKnowledge()}
						>
							保存
						</Button>
					</Col>
				</Suspense>
			</GridContent>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(SlotRules));
